import React, { useEffect } from 'react'
import { apiGetInfo } from '@/utils/apis.js'
import { useQuery, useMutation } from '@tanstack/react-query'
import useStore from '@/store/bazi.js'
import DuiGou from '@/comp/DuiGou'

import CircleHalfLoading from '@/comp/CircleHalfLoading'
import { useSearchParams, useNavigate } from "react-router";
export default function CheckIsPaySuccess() {
  var navi = useNavigate()
  const updateBaZi = useStore((state) => state.updateBaZi)
  var [searchParams, setSearchParams] = useSearchParams()
  const suanminID = searchParams.get('id');
  var { data, isPending, failureCount } = useQuery({
    queryKey: ['getInfoById'],
    queryFn: apiGetInfo,
    retry: 4,
    retryDelay: 3000,
    meta: searchParams.get('id')
  })
  useEffect(() => {
    if (!data) { return }
    updateBaZi(data)
    setTimeout(() => {
      navi('/detail', { replace: true })
    }, 3000)
  }, [data])


  if (isPending) {
    return <>
      <div className="h-[20px]"></div>
      <div className="text-center text-[18px]">请勿关闭本页</div>
      <div className="text-center text-[18px]">正在查询支付结果...</div>
      <div className="w-[60px] h-[60px] mx-auto mt-[20px] ">
        <CircleHalfLoading></CircleHalfLoading>
      </div>
    </>
  }
  if (failureCount == 5) {
    return <>
      <div className="h-[20px]"></div>
      <div className="text-center text-[18px]">未查询到结果,请稍后再试或联系客服</div>
      <div className="w-fit mx-auto mt-[10px] p-[5px_10px] text-[#e4ad29] border-[#e4ad29] border-1 border-solid rounded" onClick={() => { navi('/my', { replace: true }) }}>个人中心→</div></>
  } else {
    return <>
      <div className="h-[20px]"></div>
      <div className="text-center text-[18px]">支付成功,正在跳转...</div>
      <div className="text-center text-[18px]"></div>
      <div className="w-[60px] h-[60px] mx-auto mt-[20px] ">
        <DuiGou></DuiGou>
      </div>
    </>
  }
}
